<template>
   <footer>
        <div class="footerContainer">
            <div class="footerRowOne">
                <ul>
                    <li><img src="../../assets/img/9-底部/1.png" alt=""><a href="javascript:;" title="">营销需求免费答疑</a></li>
                    <li><img src="../../assets/img/9-底部/2.png" alt=""><a href="javascript:;" title="">定制专属推广方案</a></li>
                    <li><img src="../../assets/img/9-底部/3.png" alt=""><a href="javascript:;" title="">执行方案效果评估</a></li>
                    <li><img src="../../assets/img/9-底部/4.png" alt=""><a href="javascript:;" title="">大客户合作优惠</a></li>
                </ul>
            </div>
            <div class="footerRowTwo">
                <ul style="margin-top:10px;">
                    <li><a href="javascript:;" title="" class="footerWhite">关注我们</a></li>
                    <li style="height: 86px;"><img src="../../assets/img/9-底部/5.png" alt=""></li>
                    <li><a href="javascript:;" title="">微信公众号</a></li>
                </ul>
                <ul style="margin-left: 40px;margin-top:10px;">
                    <li><a href="javascript:;" title="" class="footerWhite">媒体优选</a></li>
                    <li ><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/view2/hotMedia'})">热销媒体</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/view2/appRect'})">APP矩阵</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/view2/DSPSale'})">DSP营销</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/view2/SEMSale'})">SEM营销</a></li>
                </ul>
                <ul style="margin-left: 40px;margin-top:10px;">
                    <li><a href="javascript:;" title="" class="footerWhite">AI智投</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/AISelect'})">选择营销活动目标</a></li>
                    <!-- <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/createAIPlan'})">创建投放计划</a></li> -->
                    <li><a href="javascript:;" title="" class="hover">创建投放计划</a></li>
                </ul>
                <ul style="margin-left:40px;margin-top:10px;">
                    <li><a href="javascript:;" title="" class="footerWhite">商业合作</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/bigcustomer'})">大客户服务</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/agent'})">代理合作</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/about'})">关于我们</a></li>
                    <li><a href="javascript:;" title="" class="hover" @click="$router.push({path:'/mediaIn'})">媒体入驻</a></li>
                </ul>
                <ul style="margin-left:35px;margin-top:10px;" class="footerHover">
                    <li><a href="javascript:;" title="" class="footerWhite" style="margin-left:15px;">全国免费咨询热线</a></li>
                    <li><a href="javascript:;" title="" style="margin-left:15px;" class="hover">周一至周五9:00-18:00</a></li>
                    <li class="hovers"><span></span><a  style="margin-left:13px;" href="javascript:;" title="">400-800-3683</a></li>
                    <li class="hovers"><span></span><a  style="margin-left:13px;" href="javascript:;" title="" @click="connectQQ">QQ在线</a></li>
                    <li class="hovers"><span></span><a  style="margin-left:13px;" href="javascript:;" title="">x_newmedia@163.com</a></li>
                </ul>
            </div>
            <div class="footerRowThree">
                <img src="../../assets/img/9-底部/13.png" alt="">
                <span>@Meching New Media 2018 鄂ICP备18010374号-1 </span>
            </div>
        </div>
	</footer> 
</template>
<script>
export default {
    
}
</script>
<style scoped>
footer{
	width: 100%;
	height: 400px;
	background-color: #2F3034;
    overflow: hidden;
}
.footerContainer{
	width: 1200px;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}
.footerRowOne ul {
	overflow: hidden;
	border-bottom: 1px solid #3E3F43;
}
.footerRowOne ul li {
	height: 84px;
	line-height: 84px;
	float: left;
}
.footerRowOne ul li a{
	color: #fff;
	font-size: 16px;
	margin-left: 18px;
}
.footerRowOne ul li:nth-child(1){
	margin-left:100px ;
}
.footerRowOne ul li:nth-child(2){
	margin-left: 110px;
}
.footerRowOne ul li:nth-child(3){
	margin-left: 120px;
}
.footerRowOne ul li:nth-child(4){
	margin-left: 120px;
}
.footerRowTwo{
	margin-top: 26px;
	width: 100%;
	height: 200px;
	border-bottom: 1px solid #3E3F43;
}
.footerRowTwo ul{
    width:17%;
	float: left;
}
.footerRowTwo ul li{
    width:100%;
	height: 30px;
	line-height: 30px;
	padding: 2px 0;
}
.footerRowTwo ul li a{
    text-align: center;
    display: inline-block;
	font-size: 16px;
	color: #626365;
    text-align: center;
    padding-left:6px;
    padding-right:6px;
}
.footerRowTwo ul li a.footerWhite{
	color: #fff;
    margin-left:2px;
}
.footerRowTwo ul:nth-child(5) li{
	width: 260px;
	height: 30px;

}
.footerRowThree{
    margin-top:-5px;
	width: 100%;
	height: 99px;
}
.footerRowThree img{
	vertical-align: middle;
}
.footerRowThree span{
	font-size: 14px;
	color: rgb(153, 153, 153);
	margin-left: 80px;
	line-height: 99px;
}
.footerHover>li>img{
	margin-left: 15px;
}
.hover:hover{
    background:#ee4041;
    color:#fff;   
}
.hovers:hover{
    background:#ee4041;
    color:#fff;   
}
.hovers:hover a{
    color:#fff;
}
.footerHover li:nth-child(3) span {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -5%;
    margin-left: 13px;
    background: url('../../assets/img/9-底部/12.png') no-repeat 2px 1px;
}
.footerHover li:nth-child(3):hover span {
    background: url('../../assets/img/9-底部/6.png') no-repeat 2px 1px;
}

.footerHover li:nth-child(4) span {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -10%;
    margin-left: 13px;
    background: url('../../assets/img/9-底部/7.png') no-repeat 2px 1px;
}
.footerHover li:nth-child(4):hover span {
    background: url('../../assets/img/9-底部/8.png') no-repeat 2px 1px;
}

.footerHover li:nth-child(5) span {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -13%;
    margin-left: 13px;
    background: url('../../assets/img/9-底部/9.png') no-repeat 2px 1px;
}
.footerHover li:nth-child(5):hover span {
    background: url('../../assets/img/9-底部/10.png') no-repeat 2px 1px;
}
</style>


